<template>
  <div class="dawn-setting">
    <div class="setting-item">
      <div class="setting-label">图片上传数量</div>
      <div class="setting-control">

        <div class="button-group">
          <van-button size="small" type="primary" @click="decrement" :disabled="parseInt(inputValue) <= 1">
            -
          </van-button>

          <van-field v-model="inputValue" type="number" :min="1" @input="handleInput" @blur="handleBlur" />

          <van-button size="small" type="primary" @click="increment">
            +
          </van-button>
        </div>
      </div>
    </div>

    <div class="setting-item">
      <div class="setting-label">默认照片</div>
      <div class="setting-control">
        <van-switch v-model="settings.default_images" @change="handleSettingChange" />
      </div>
    </div>

    <div class="setting-item">
      <div class="setting-label">随机位置</div>
      <div class="setting-control">
        <van-switch v-model="settings.randomLocation" @change="handleSettingChange" />
      </div>
    </div>

    <div class="setting-item">
      <div class="setting-label">反馈功能</div>
      <div class="setting-control">
        <van-switch v-model="settings.feedbackEnabled" @change="handleSettingChange" />
      </div>
    </div>


    <div class="save-button">
      <van-button type="primary" block @click="saveSettings" :loading="isSaving">
        保存设置
      </van-button>
    </div>

    <!-- 选项说明区域 -->
    <div class="setting-desc">
      <p>选项说明：</p>
      <ul>
        <li><b>图片上传数量</b>：设置每次最多可上传的图片张数，最小为1，无最大限制。
          <b style="color:red;">(每日打卡最好使用默认只上传一张，多张照片我没有试过！)</b>
        </li>
        <li><b>默认照片</b>：开启后，当你的图库里面没有照片的时候会从图库中随机上传一张照片(即使这张图片已经使用过，也有概率会上传)
          <b style="color:red;">(请确保图库里有数据，不然会一直使用默认的照片进行上传！)</b>
        </li>
        <li><b>随机位置</b>：开启后，打卡时将随机获取一条。<b style="color:red;">(请确保地址库里面有两条以上的地址，随机才会生效)</b></li>
        <li><b>反馈功能</b>：开启后，添加打卡地址的时候会有打卡反馈功能，可以填写反馈内容，上传的时候取的是跟地址同一条的反馈内容<b
            style="color:red;">(请确保地址库里面有两条以上的地址，随机才会生效)</b></li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits,defineProps, watch } from 'vue';
import {
  showToast,
  Button,
  showConfirmDialog,
  PullRefresh,
  Checkbox,
  Cell,
  Field,
  Icon,
  Switch as VanSwitch
} from 'vant';
import request from '@/utils/request';
import apiUrls from '@/config/apiUrls';
const emits = defineEmits(['updata:setting'])


// 定义接收的 props
const props = defineProps({
  settings: {}
});

// 输入框的值
const inputValue = ref(props.settings.image_count?.toString() || '1');
const isSaving = ref(false);

// 设置数据
const settings = ref({
  imageCount: props.settings.image_count || 1,
  randomLocation: props.settings.random_location || false,
  feedbackEnabled: props.settings.feedback_enabled || false,
  default_images: props.settings.default_images || false
});



// 保存设置
const saveSettings = async () => {
  try {
    isSaving.value = true;
    const response = await request.post(apiUrls.settings.dawnSetting, settings.value);
    if (response.code === 200) {
      showToast('设置保存成功');
      emits('updata:setting');
    } else {
      throw new Error(response.message || '保存失败');
    }
  } catch (error) {
    showToast(error.message || '保存设置失败');
    console.error('保存设置失败:', error);
  } finally {
    isSaving.value = false;
  }
};

// 处理设置变化
const handleSettingChange = () => {

};

// 处理输入
const handleInput = (value) => {
  // 允许输入框为空
  if (value === '') {
    inputValue.value = '';
    return;
  }

  // 处理数字输入
  const numValue = parseInt(value) || 1;
  if (numValue < 1) {
    inputValue.value = '1';
  }

  // 更新设置
  settings.value.imageCount = parseInt(inputValue.value);
};

// 处理失去焦点
const handleBlur = () => {
  // 如果输入框为空或值小于1，设为1
  if (inputValue.value === '' || parseInt(inputValue.value) < 1) {
    inputValue.value = '1';
  }

  // 更新设置
  settings.value.imageCount = parseInt(inputValue.value);
};

// 增加数量
const increment = () => {
  const currentValue = parseInt(inputValue.value);
  inputValue.value = (currentValue + 1).toString();
  settings.value.imageCount = currentValue + 1;
};

// 减少数量
const decrement = () => {
  const currentValue = parseInt(inputValue.value);
  if (currentValue > 1) {
    inputValue.value = (currentValue - 1).toString();
    settings.value.imageCount = currentValue - 1;
  }
};

// 组件挂载时获取设置
onMounted(() => {

});
</script>

<style scoped>
.dawn-setting {
  padding: 16px;
  background-color: #fff;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  font-size: 14px;
  color: #323233;
}

.setting-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button-group {
  display: flex;
  gap: 4px;
}

.save-button {
  margin-top: 24px;
}

:deep(.van-field) {
  width: 60px;
  padding: 0;
  text-align: center;
}

:deep(.van-field__control) {
  text-align: center;
}

:deep(.van-button) {
  min-width: 32px;
}

:deep(.van-field__body) {
  height: 100%;
}

.setting-desc {
  margin-top: 20px;
  color: #888;
  font-size: 13px;
  line-height: 1.7;
  background: #f7f8fa;
  border-radius: 6px;
  padding: 12px 16px;
  max-height: 300px;
  overflow-y: auto;
}

.setting-desc::-webkit-scrollbar {
  width: 6px;
}

.setting-desc::-webkit-scrollbar-thumb {
  background-color: #c8c9cc;
  border-radius: 3px;
}

.setting-desc::-webkit-scrollbar-track {
  background-color: #f7f8fa;
}

.setting-desc ul {
  margin: 0;
  padding-left: 18px;
}

.setting-desc li {
  margin-bottom: 4px;
}
</style>
